<!--Page structure, html and css coded by MJ Terrell-->
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="java.io.*,java.sql.*,java.util.*,com.mysql.jdbc.PreparedStatement" %>
<%! public String createCustomer(String[] customerArray) {
String sql = "INSERT INTO customers ("
+ "CustFirstName, CustLastName, CustAddress, CustCity, CustProv, CustCountry, CustPostal, CustHomePhone, CustBusPhone, CustEmail,Password"
+ ") values ("
+ " '" + customerArray[0] + "',"
+ " '" + customerArray[1] + "',"
+ " '" + customerArray[2] + "',"
+ " '" + customerArray[3] + "',"
+ " '" + customerArray[4] + "',"
+ " '" + customerArray[5] + "',"
+ " '" + customerArray[6] + "',"
+ " '" + customerArray[7] + "',"
+ " '" + customerArray[8] + "',"
+ " '" + customerArray[9] + "',"
+ " '" + customerArray[10] + "')";
try {
Class.forName("com.mysql.jdbc.Driver");
Connection dbConn = DriverManager.getConnection("jdbc:mysql://localhost:3306/TravelExperts", "root", "");
Statement stmt = dbConn.createStatement();
int rows = stmt.executeUpdate(sql);
dbConn.close(); // close the connection

if (rows == 1) {
return " <meta http-equiv='refresh' content='0; url=index.jsp'>";
}
} catch (Exception excp) {
excp.printStackTrace();
}
return "Insert was NOT successful. Please contact administrtor.1-888-888-8888";
}
%>
<!DOCTYPE html>
<html>
    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Register</title>
        <link rel="stylesheet" type="text/css" href="main.css" />
        <script type="text/javascript">
            function trim(value) {
                return value.replace(/(^\s*)|(\s*$)/g, '');
            }

            var errMsg = {
                required: {
                    msg: 'This field is required.',
                    test: function(obj, load) {
                        return trim(obj.value).length > 0 || load || trim(obj.value) != obj.defaultValue;
                    }
                },
                email: {
                    msg: 'Not a valid email address.',
                    test: function(obj) {
                        return trim(obj.value).length <= 0 || /^[a-z0-9_+.-]+\@([a-z0-9-]+\.)+[a-z0-9]{2,4}$/i.test(obj.value);
                    }
                },
                phone: {
                    msg: 'Not a valid phone number.',
                    test: function(obj) {
                        var m = /(\d{3}).*(\d{3}).*(\d{4})/.exec(obj.value);
                        if (m)
                            obj.value = "(" + m[1] + ") " + m[2] + "-" + m[3];
                        return trim(obj.value).length <= 0 || m;
                    }
                }
            };

            function watchFields(form) {
                for (var i = 0; i < form.elements.length; i++) {
                    addEvent(form.elements[i], 'blur', function() {
                        hideErrors(this); //add by myself
                        return validateField(this);
                    });
                }
            }
            function validateForm(form, load) {
                var valid = true;
                for (var i = 0; i < form.elements.length; i++) {
                    hideErrors(form.elements[i]);
                    if (validateField(form.elements[i], load))
                        valid = false;
                }
                return valid;
            }
            function validateField(elem, load) {
                var errors = [];
                for (var name in errMsg) {
                    var re = new RegExp('(^|\\s)' + name + '(\\s|$)');
                    if (re.test(elem.className) && !errMsg[name].test(elem, load))
                        errors.push(errMsg[name].msg);
                }
                if (errors.length)
                    showErrors(elem, errors);
                return errors.length > 0;
            }
            function hideErrors(elem) {
                var next = elem.nextSibling;
                if (next && next.nodeName == 'UL' && next.className == 'errors') {
                    elem.parentNode.removeChild(next);
                }
            }
            function showErrors(elem, errors) {
                var next = elem.nextSibling;
                if (next && (next.nodeName != 'UL' || next.className != 'errors')) {
                    next = document.createElement('ul');
                    next.className = 'errors';
                    elem.parentNode.insertBefore(next, elem.nextSibling);
                }
                for (var i = 0; i < errors.length; i++) {
                    var li = document.createElement('li');
                    li.innerHTML = errors[i];
                    next.appendChild(li);
                }
            }
            function getInputsByName(name) {
                var results = [];
                results.numChecked = 0;
                var input = document.getElementsByTagName("input");
                for (var i = 0; i < input.length; i++) {
                    if (input[i].name == name) {
                        results.push(input[i]);
                        if (input[i].checked)
                            results.numChecked++;
                    }
                }
                return results;
            }
            function addLoadEvent(func) {
                var oldonload = window.onload;
                if (typeof window.onload != 'function') {
                    window.onload = func;
                } else {
                    window.onload = function() {
                        oldonload();
                        func();
                    }
                }
            }
            function addEvent(obj, event, eventHandler) {
                if (obj.addEventListener) {
                    obj.addEventListener(event, eventHandler, false);
                } else if (obj.attachEvent) {
                    event = 'on' + event;
                    obj.attachEvent(event, eventHandler);
                }
            }
            function stopDefault(e) {
                if (e && e.preventDefault)
                    e.preventDefault();
                else
                    window.event.returnValue = false;
                return false;
            }
            function watchForm(form) {
                addEvent(form, 'submit', function(e) {
                    if (!validateForm(form))
                        stopDefault(e);
                });
            }
            addLoadEvent(function() {
                var form = document.getElementsByTagName('form')[0];
                watchFields(form);
                watchForm(form);
            });
        </script>


    </head>
    <body>
        <%
        String[] customer = {"", "", "", "", "", "", "", "", "", "", "", ""};
        if (request.getParameter("submit") != null) {
        customer[0] = (String) request.getParameter("fname");
        customer[1] = (String) request.getParameter("lname");
        customer[2] = (String) request.getParameter("address");
        customer[3] = (String) request.getParameter("city");
        customer[4] = (String) request.getParameter("prov");
        customer[5] = (String) request.getParameter("country");
        customer[6] = (String) request.getParameter("postal");
        customer[7] = (String) request.getParameter("phone");
        customer[8] = (String) request.getParameter("busphone");
        customer[9] = (String) request.getParameter("email");
        customer[10] = (String) request.getParameter("pass");
        customer[11] = (String) request.getParameter("pass2");
        out.println("<h4 style='color:crimson'>" + createCustomer(customer) + "</h4>");
        //after writing customer data empty the array so form will be empty
        customer[0] = "";
        customer[1] = "";
        customer[2] = "";
        customer[3] = "";
        customer[4] = "";
        customer[5] = "";
        customer[6] = "";
        customer[7] = "";
        customer[8] = "";
        customer[9] = "";
        customer[10] = "";
        customer[11] = "";
        }
        %>
        <div id="container">
            <div id="header">Travel Experts
                <div class="nav"><a href="index.jsp">Login</a>&nbsp;&nbsp |&nbsp;&nbspRegister&nbsp;&nbsp |
                    <a href="update.jsp">&nbsp;&nbsp Update</a>&nbsp;&nbsp; |
                    <a href="itinerary.jsp">&nbsp;&nbsp Itinerary</a></div>
                <div class="login">
                    <div class="regtransbox">
                        <p>Register here</p>

                        <form action="" method="post">
                            <div class="InnerLeft">
                                Email: <input type="text" name="email" class="required email text"/>
                                Password: <input type="password" name="pass" class="required text"/>
                                Re-enter Password: <input type="password"name="pass2" class="required text"/>
                                First Name: <input type="text" name="fname" class="required text" />
                                Last Name: <input type="text" name="lname" class="required text"/>
                                Address: <input type="text" name="address" class="required text"/>

                                <br />
                                <input name="submit" type="submit" value="Submit" id="btn" class="submit"/>
                                <input type="reset" value="Reset" id="btn" />

                            </div>
                            <div class="InnerRight">
                                City: <input type="text" name="city" class="required text"/>
                                Province: <input type="text" name="prov" class="required text"/>
                                Country: <input type="text" name="country" class="required text"/>
                                Postal Code: <input type="text" name="postal" class="required text"/>
                                Phone Number: <input type="text" name="phone" class="phone text"/>
                                Bus Phone: <input type="text" name="busphone" class="phone text"/>
                            </div>
                        </form>

                    </div>
                </div>	
            </div>
        </div>
    </body>
</html>

